<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
    });
  },
  data() {
    return {
      theme: this.json.theme, //主题颜色
    };
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => [],
    },
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let that = this;
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        let legend = [];
        var series = [];
        let json = this.data;
        legend = json.legend;
        try {
          var length = Object.keys(json.list[0]).length - 1;
          for (let j = 0; j < length; j++) {
            let obj = {
              name: legend[j],
              type: "bar",
              data: json.list.map((v) => v["value" + (j + 1).toString()]),
              barWidth: 10, //柱子宽度
              barGap: 1, //柱子之间间距
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: this.json.theme.echartsBackgroundColor[j],
                    },
                    {
                      offset: 1,
                      color: this.json.theme.echartsBackgroundColor[length * j],
                    },
                  ]),
                  opacity: 1,
                },
              },
            };
            series.push(obj);
          }
        } catch (err) {
          console.log(err);
          return false;
        }
        let option = (option = {
          // backgroundColor: "#00265f",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: legend,
            align: "right",
            left: 30,
            top: 10,
            textStyle: {
              color: this.json.theme.echartsBackgroundColor[0],
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 35,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "18%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: json.list.map((v) => v.name),
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#063374",
                  width: 1,
                  type: "solid",
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                formatter: "{value}",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                  width: 1,
                  type: "solid",
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                },
              },
            },
          ],
          series: series,
        });
        myChart.setOption(option);
        myChart.off("click");
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        console.log(err);
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>>
